<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="1">
        <div ref="chart" style="width: 100%;height:500px;margin-top:40px;"></div>
      </el-col>
    </el-row>
    <el-row style="margin-top:20px;">
      <el-col :offset="1">
          <h3>| 绩效详情</h3>
      </el-col>
    </el-row>
    <el-row>
      <el-col v-for="(task,index) in tasks" :key="index" :span="10" :offset="index%2==0?2:1" >
        <Performance  :task="task" />
      </el-col>
    </el-row>
    <!-- 底部 -->
    <el-footer></el-footer>
  </div>
</template>

<script>

import Performance from "@/components/ArchivesComponent/Performance";
import {getPerformanceChart} from '@/api/performance'

export default {
    components: {Performance},
    data() {
      return {
        basicInfo: {
          name: '王二小',
          headPortrait: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2171738069,1480855196&fm=111&gp=0.jpg',
          sex: '男',
          birthday: '2000年04月08日',
          nation: '汉族',
          IDcard: '362426200004084818',
          college: '江西理工大学',
          educationBackground: '本科',
          major: '网络工程',
          qualificationsType: '全日制',
        },
        tasks:[
          {
            publisher:{
              avatar: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3869515018,2735128030&fm=26&gp=0.jpg',
              name: '马冬梅',
              position: '部门主管'
            },
            describe: '这是这个月给你的任务',
            publishDate: '2019年02月01日',
            endDate: '2019年02月28日',
            progresses:[
              {
                date: '2019年02月07日',
                percentage: '20%',
                describe: '当前完成了20%的任务'
              },
              {
                date: '2019年02月14日',
                percentage: '60%',
                describe: '当前完成了60%的任务'
              },
              {
                date: '2019年02月28日',
                percentage: '100%',
                describe: '当前完成了100%的任务'
              }
            ]
          },
          {
            publisher:{
              avatar: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3869515018,2735128030&fm=26&gp=0.jpg',
              name: '马冬梅',
              position: '部门主管'
            },
            describe: '这是这个月给你的任务',
            publishDate: '2019年03月01日',
            endDate: '2019年03月28日',
            progresses:[
              {
                date: '2019年03月05日',
                percentage: '20%',
                describe: '当前完成了20%的任务'
              },
              {
                date: '2019年03月11日',
                percentage: '60%',
                describe: '当前完成了60%的任务'
              },
              {
                date: '2019年03月29日',
                percentage: '100%',
                describe: '当前完成了100%的任务'
              }
            ]
          },

        ]
      }
    },
    mounted(){
       this.drawChartBar();
    },
    methods:{
      async drawChartBar() {
          const res = await getPerformanceChart("employeeId:123");
          if (res.code === 200) {
            const myChart = this.$echarts.init(this.$refs.chart);
            myChart.setOption(res.data.chartOption);
          }
      },
    }
}
</script>
